<template>
	<view class="page">
		<!-- 头部背景 -->
		<view class="head-bg">
			<view class="head-user">
				<view class="user">
				</view>

			</view>
			<view class="wallet-balance">
				<view class="wallet">
					<text class="number">￥10000</text>
					<text><text class="iconfont icon-qianbao" style="margin-right: 20rpx;"></text>当前余额</text>
				</view>
			</view>
			<view class="bg">
				<image src="/static/integral_bg1.png" mode=""></image>
			</view>
		</view>
		<!-- 钱包充值 -->
		<view class="wallet-recharge">
			<view class="recharge-title">
				<text>钱包充值1</text>
			</view>
			<view class="recharge-list">
				<view class="list" v-for="(item, index) in money" :class="{ action: selectedIndex === index }"
					:key="index" @click="selectItem(index)">
					<view class="price">
						<text>￥{{item}}</text>
					</view>
				</view>
			</view>
			<view class="recharge-btn">
				<view class="btn" @click="confirmRecharge">
					立即充值 ￥{{ selectedAmount }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money: [100, 200, 300, 500],
				selectedIndex: 0 // 初始选中的索引
			};
		},
		computed: {
			selectedAmount() {
				// 获取当前选中的金额，确保在数组范围内
				return this.money[this.selectedIndex] || 0;
			},
		},
		methods: {
			selectItem(index) {
				this.selectedIndex = index; // 更新选中的索引
			},

			confirmRecharge() {
				// 确认充值的方法
				console.log(`充值金额: ￥${this.selectedAmount}`);
				// 这里可以添加调用接口的代码，执行充值操作
			},
			updateMoney(newMoneyArray) {
				// 更新金额列表并重置选中项
				this.money = newMoneyArray;
				this.selectedIndex = 0; // 重置选中项为第一个
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'Recharge.scss';
</style>